<template>
  <div class="image_wrap">
    <boxWrap :config="config">
      <div class="image">
        <img :src="config.url" :style="styleObject" alt="">
      </div>
    </boxWrap>
  </div>

</template>

<script>
import boxWrap from '../base/boxWrap'
export default {
  name: 'ImageChart',
  components: { boxWrap },
  props: {},
  data() {
    return {
      config: {
        url: "https://q5.itc.cn/q_70/images03/20240312/dafb237d64634fbabff5c406eea3ff0b.jpeg",
        width: 300,
        height: 200,
        x: 300,
        y: 10,
        backgroundColor: '#999999',
        objectFit: 'contain',
        borderRadius: 0,
      }
    }
  },
  computed: {
    styleObject() {
      return {
        width: `${this.config.width}px`,
        height: `${this.config.height}px`,
        backgroundColor: `${this.config.backgroundColor}`,
        objectFit: `${this.config.objectFit}`,
        borderRadius: `${this.config.borderRadius}px`,
      };
    }
  },
  watch: {},
  created() { },
  mounted() { },
  methods: {}
}
</script>

<style scoped lang="scss"></style>
